<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/lyBaseCss.css">
    <link rel="stylesheet" href="css/lyjianshe.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <div class="contain">
        <div class="header"></div>
        <div class="main">
            <div class="m_l">
                <div id="zdlbjssj" class="m_l_t">
                </div>
                <div id="position">
                    <p>已建站点数据</p>
                    <div>
                        <span>总任务数</span>
                        <p>39713</p>
                        <span>已建成</span>
                        <p>16792</p>
                    </div>
                </div>
                <div id="zdyjsl" class="m_l_b"></div>
            </div>
            <div class="m_r">
                <div id="zdjsqksj" class="m_r_t"></div>
                <div id="zdjssjdqtop10" class="m_r_m"></div>
                <div id='line' class="m_r_b"></div>
            </div>
        </div>
    </div>
</body>
<script>
$(function() {
    var myChart = echarts.init(document.getElementById('zdjsqksj'));
    var option = {
        title: {
            text: '站点建设建设数据',
            textStyle: {
                color: '#ff0',
                fontSize: 16
            },
            left: 'center'
        },
        legend: {
            show: false
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [{
            name: '简易站',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['20%', '50%'],
            label: {
                normal: {
                    show: false,
                    color: '#ccc',
                    formatter: ' {a|在建11428}',
                    position: 'center',
                    rich: {
                        a: {
                            color:'#ccc',
                            padding:[0,0,20,0]
                        }
                    }
                },
            },
            labelLine: {
                normal: {
                    show: false,
                    length: 3,
                    length2: 1
                }
            },
            data: [{
                    value: 2721,
                    name: '标准站',
                    itemStyle: {
                        color: '#ff2376'
                    },
                    label: {
                        show: true
                    }
                },
                {
                    value: 3423,
                    name: '简易站',
                    itemStyle: {
                        color: '#00c0ff'
                    }
                },
                {
                    value: 5171,
                    name: '专业站',
                    itemStyle: {
                        color: '#4e78a2'
                    }
                },
            ],
        }, {
            name: '标准站',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    color: '#ccc',
                    formatter: '已建\n16792',
                    position: 'center',
                },

            },
            labelLine: {
                normal: {
                    show: false,
                    length: 3,
                    length2: 1
                }
            },
            data: [{
                    value: 5721,
                    name: '标准站',
                    itemStyle: {
                        color: '#ff2376'
                    },
                    label: {
                        show: true
                    }
                },
                {
                    value: 6383,
                    name: '简易站',
                    itemStyle: {
                        color: '#00c0ff'
                    }
                },
                {
                    value: 4688,
                    name: '专业站',
                    itemStyle: {
                        color: '#4e78a2'
                    }
                },
            ],
        }, {
            name: '专业站',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['80%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    color: '#ccc',
                    formatter: '代建\n11493',
                    position: 'center',
                },

            },
            labelLine: {
                normal: {
                    show: false,
                    length: 3,
                    length2: 1
                }
            },
            data: [{
                    value: 3112,
                    name: '标准站',
                    itemStyle: {
                        color: '#ff2376'
                    },
                    label: {
                        show: true
                    }
                },
                {
                    value: 3324,
                    name: '简易站',
                    itemStyle: {
                        color: '#00c0ff'
                    }
                },
                {
                    value: 5171,
                    name: '专业站',
                    itemStyle: {
                        color: '#4e78a2'
                    }
                },
            ],
        }]
    };
    myChart.setOption(option);
})
$(function() {
    var myChart = echarts.init(document.getElementById('zdlbjssj'));
    var option = {
        title: {
            text: '站点类别建设数据',
            textStyle: {
                color: '#ff0',
                fontSize: 16
            },
            left: 'center'
        },
        legend: {
            show: false
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [{
            name: '简易站',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['15%', '50%'],
            label: {
                normal: {
                    show: false,
                    color: '#ccc',
                    formatter: '{a|简易站13129}',
                    position: 'center',
                     rich: {
                        a: {
                            color:'#ccc',
                            padding:[0,0,10,0]
                        }
                    }
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 6747,
                    name: '未完成',
                    itemStyle: {
                        color: '#ff2376'
                    },
                    label: {
                        show: true
                    }
                },
                {
                    value: 6383,
                    name: '已建成',
                    itemStyle: {
                        color: '#4e78a2'
                    }
                },
            ],
        }, {
            name: '标准站',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    color: '#ccc',
                    formatter: '标准站\n11554',
                    position: 'center'

                },

            },
            labelLine: {
                normal: {
                    show: false,
                }
            },
            data: [{
                    value: 5833,
                    name: '未完成',
                    itemStyle: {
                        color: '#00c0ff'
                    },
                    label: {
                        show: true
                    }
                },
                {
                    value: 5721,
                    name: '已建成',
                    itemStyle: {
                        color: '#4e78a2 '
                    }
                },
            ]
        }, {
            name: '专业站',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['55%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    color: '#ccc',
                    formatter: '专业站\n15030',
                    position: 'center'
                },

            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 10342,
                    name: '未完成',
                    itemStyle: {
                        color: '#00ff4e'
                    },
                    label: {
                        show: true
                    }
                },
                {
                    value: 4688,
                    name: '已建成',
                    itemStyle: {
                        color: '#4e78a2'
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);
})
$(function() {
    var myChart = echarts.init(document.getElementById('zdjssjdqtop10'));


    var dataAxis = ['商丘市', '驻马店', '洛阳市', '南阳市', '濮阳市', '焦作市', '周口市', '新乡市', '漯河', '安阳市'];

    var data = [3070, 2134, 1302, 1209, 1030, 845, 834, 798, 737, 557];

    option = {
        title: {
            text: '站点建设数据地区TOP10',
            textStyle: {
                color: '#ff0',
                fontSize: 16
            },
            left: 'center',
            top: 3
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                color: '#ccc',
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ccc',
            },
            splitLine: {
                show: false,
            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
                normal: {
                    color: '#30d7c5',
                    barBorderRadius: 5,
                },
            },
            data: data,
            name: '建设量'
        }]
    };
    myChart.setOption(option);
})
$(function() {
    var myChart = echarts.init(document.getElementById('zdyjsl'));


    var dataAxis = [];
    for (var i = 0; i < 31; i++) {
        dataAxis.push(i + 1)
    }
    var data = [];
    for (var j = 0; j < 31; j++) {

        data.push(random(200, 250))

    }

    option = {
        title: {
            text: '站点月建设量',
            textStyle: {
                color: '#ff0',
                fontSize: 16
            },
            left: 'center',
            top: 3
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                color: '#ccc',
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ccc',
            },
            splitLine: {
                show: false,
            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        dataZoom: [{
            type: 'inside'
        }],
        legend: {
            show: true,
            right: '5%',
            top: '10%',
            textStyle: {
                color: '#ccc'
            }

        },
        series: [{
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#30d7c5',
                    barBorderRadius: 5,
                },
            },
            data: data,
            name: '建设量'
        }]
    };
    myChart.setOption(option);
})
$(function() {
    var lineEcharts = echarts.init(document.getElementById("line"));
    var lineOpt = {
        title: {
            x: 50, //标题位置
            text: '当月站点建设趋势',
            textStyle: {
                color: "#fff"
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['简易站', '标准站', '专业站'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: (function() {
                var arr = [];
                for (var i = 1; i <= 31; i++) {
                    arr.push(i)
                }
                return arr
            })(),
            axisLabel: {
                color: "#fff"
            }
        }],
        yAxis: [{
            splitLine: {
                show: false
            },
            type: 'value',
            show: false
        }],
        series: [{
                name: '简易站',
                type: 'line',
                stack: '总量',
                areaStyle: { normal: {} },
                data: (function() {
                    var arr = [];
                    for (var i = 1; i <= 31; i++) {
                        arr.push(random(100, 200))
                    }
                    return arr
                })()
            },
            {
                name: '标准站',
                type: 'line',
                stack: '总量',
                areaStyle: { normal: {} },
                data: (function() {
                    var arr = [];
                    for (var i = 1; i <= 31; i++) {
                        arr.push(random(60, 80))
                    }
                    return arr
                })()
            }, {
                name: '专业站',
                type: 'line',
                stack: '总量',
                areaStyle: { normal: {} },
                data: (function() {
                    var arr = [];
                    for (var i = 1; i <= 31; i++) {
                        arr.push(random(60, 80))
                    }
                    return arr
                })()
            }
        ]
    };
    lineEcharts.setOption(lineOpt);
})

function random(m, n) {
    return Math.floor(Math.random() * (n - m + 1)) + m;
}
</script>

</html>